<template>
	<div class="">
		<el-form ref="searchForm" :inline="true" :model="searchForm">
			<el-form-item label="采购商品编号">
				<el-input v-model="searchForm.goods_no" placeholder="请输入采购商品编号" clearable />
			</el-form-item>
			<el-form-item label="采购商户名称">
				<el-input v-model="searchForm.shop_name" placeholder="请输入采购商户名称" clearable />
			</el-form-item>
			<el-form-item label="采购商品名称">
				<el-input v-model="searchForm.goods_name" placeholder="请输入采购商品名称" clearable />
			</el-form-item>
			<el-form-item label="受理状态">
				<el-select v-model="searchForm.status" filterable placeholder="请选择受理状态" clearable style="width: 170px;">
					<el-option v-for="item in options1" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="search()">查询</el-button>
				<el-button size="small" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>
		<el-divider />
		<div style="padding:0 30px">
			<div class="flex align-center table-top-btns">
				<h5 class="flex align-center">
					<svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
				</h5>
			</div>
			<el-table v-show="tableData.length > -1" :data="tableData" border>
				<el-table-column align="center" prop="id" label="商品ID" />
				<el-table-column align="center" prop="order_id" label="订单ID" />
				<el-table-column align="center" prop="goods_no" label="商品编号" />
				<el-table-column align="center" prop="category" label="类目" />
				<el-table-column align="center" prop="brand" label="品牌" />
				<el-table-column align="center" prop="goods_name" label="商品名称" />
				<el-table-column align="center" prop="is_new" label="成新度">
					<template slot-scope="scope">
						{{ scope.row.is_new == 100 ? '全新' : scope.row.is_new == 98 ? '98新' : scope.row.is_new == 95 ? '95新' : '90新' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="color" label="颜色" />
				<el-table-column align="center" prop="run_memory" label="运行内存" />
				<el-table-column align="center" prop="memory" label="内存" />
				<el-table-column align="center" prop="website_price" label="官网价" />
				<el-table-column align="center" prop="status_name" label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 1" type="success">{{ scope.row.status_name }}</el-tag>
						<el-tag v-else-if="scope.row.status == 7" type="danger">{{ scope.row.status_name }}</el-tag>
						<el-tag v-else>{{ scope.row.status_name }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="is_invoice" label="是否含票">
					<template slot-scope="scope">
						{{ scope.row.is_invoice == 1 ? '是' : '否' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="is_remote" label="是否远程">
					<template slot-scope="scope">
						{{ scope.row.is_remote == 1 ? '是' : '否' }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="price" label="报价金额" width="150" />
				<el-table-column align="center" prop="update_time" label="采购时间" width="150" />
				<el-table-column fixed="right" align="center" label="操作" width="170px">
					<template slot-scope="scope">
						<el-button @click="handleWithdraw(scope.row.id, scope.row.trade_no)" size="small"
							type="danger">撤回</el-button>
					</template>
				</el-table-column>
			</el-table>
			<custom-page ref="customPage" :total="total" @getList="getList" />
		</div>
		<goods-dialog ref="goodsDialog" dialog-width="1340px" :page-size="12" :append-to-body="true"
			:show-type-select="true" :show-checked-tool="true" @setSelect="setSelect" />
	</div>
</template>
<script>
import myDatePicker from '@/components/myDatePicker'
import customPage from '@/components/customPage'
import goodsDialog from '@/components/goodsDialog'
import { procureList, procureData, sendProcureList, procureApplyData, applyProcure, sendProcureCancel } from '@/api/goods'
export default {
	components: { customPage, goodsDialog, myDatePicker },
	data() {
		return {
			searchForm: {
				status: '',
				shop_name: '',
				goods_name: '',
				goods_no: ''
			},
			tableData: [],
			options1: []
		}
	},
	mounted() {
		this.getList()
		procureApplyData().then(res => {
			this.options1 = res
		})
	},
	methods: {
		// 撤回
		handleWithdraw(id, trade_no) {
			this.$confirm('您确定要撤回采购申请吗?', '撤回', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(() => {
				let data = {
					apply_id: id,
					trade_no: trade_no
				}
				sendProcureCancel(data).then(res => {
					this.getList()
				})
			}).catch(() => { })
		},
		search() {
			this.$refs.customPage.page = 1
			this.getList()
		},
		reset() {
			this.searchForm = {
				status: '',
				shop_name: '',
				goods_name: '',
				goods_no: ''
			}
			this.getList()
		},
		// 获取数据
		getList(flag) {
			// flag为true, 则不刷新表格
			const { page, pageSize } = this.$refs.customPage
			if (!flag) {
				this.tableData = []
			}
			sendProcureList({
				page,
				pageSize,
				...this.searchForm,
			}).then((res) => {
				const { list } = res.data
				this.tableData = res.data || []
				this.total = res.total || 0
			})
		},
	},
}
</script>
<style></style>
  